<template>
  <div>

    <el-dialog v-model="dialogVisible" width="700" class="my_dialog">
      <template #header>
        <div class="designDialogHead">
          <p>管理范围</p>
        </div>
      </template>
      <div class="designContent">

        <!-- 左侧内容 -->
        <div class="left">

          <div class="search">
            <el-input v-model.trim="SearchVal" placeholder="按回车筛选关键词" :prefix-icon="Search" />
          </div>

            <div v-if="isShow"class="tagGroup">
                  <div @click="clickTag(item,index)" v-for="(item,index) in tagArr" :class="item==labelName?'isActive':''" class="item">{{item}}</div>
            </div>

          <el-button-group>
            <el-button @click="selectAll" type="default" plain>全选</el-button>
            <el-button @click="invert" type="default" plain>反选</el-button>
          </el-button-group>

          <!-- 管理范围列表 -->
          <div class="designList" v-loading="loading">
            <SelectMater  v-bind="$attrs" @onRadioChange="onRadioChange" v-model:materialData="materialData" @updateLabel="updateLabel" />
          </div>
        </div>
        <div class="right">
          <div v-if="selectMaterialArr.length" class="rightList">
            <el-scrollbar  height="300px">
              <div class="item" v-for="(item, idx) in selectMaterialArr">
                <el-tag @close="closeTag(idx)" style=" margin-right: 5px;" closable type="primary">
                  <svg class="coloricon" aria-hidden="true">
                    <use xlink:href="#icon-connections-fill"></use>
                  </svg>
                  {{ item.label }}
                </el-tag>
              </div>
            </el-scrollbar>
          </div>

          
            <template  v-else>
              <el-empty style="height: 300px;" description="请从左侧列表中选择" :image-size="200"></el-empty>
            </template>

          <div class="rightFooter">

            <div class="resetData">
              <el-button @click="clearData" type="danger" >
                清空
              </el-button>
              <p>已选择{{selectMaterialArr.length}}项</p>
            </div>

            <div class="btnGroup">
              <el-button @click="handleCancel">取消</el-button>
              <el-button type="primary" @click="addDesign" :disabled="dialogDisabled">
                确认
              </el-button>
            </div>


          </div>

        </div>
      </div>

    </el-dialog>


  </div>
</template>

<script setup>
import {
  teachDesignDetail,
  upDesignDetail,
} from "@/api/chapter";
import SelectMater from "./SelectMater.vue";
import { giveEllipsisStr1, getFileHzm } from "@/utils/common";
import { ElMessage, ElPopconfirm, ElLoading } from "element-plus";
import { Search } from '@element-plus/icons-vue'
import { useRoute } from "vue-router";
import { status } from "nprogress";
const courseStatus = sessionStorage.getItem("status");
const dialogVisible = ref(false);
const labelName=ref("")
// 标签分类组
const isShow=ref(false)
const tagArr=ref(["通讯录"])
// 点击下级传来的事件
const updateLabel=(e)=>{
  // console.log(e);
  isShow.value=true
  tagArr.value.push("/",e)
  labelName.value=e
  

}

// 点击取消
const handleCancel=()=>{
  isShow.value=false
  dialogVisible.value=false
  tagArr.value=["通讯录"]
  clearData()
  }

// 点击标签栏的内容
const clickTag=(tgName,idx)=>{
    // 获取当前标签栏下的列表内容并移除后面的面包屑
    let index= tagArr.value.indexOf(tgName)
    tagArr.value.splice(index+1) 
    labelName.value=tgName
}

// 选中素材之后的数组
const selectMaterialArr = ref([]);
const props = defineProps({
  clockStatusMap: Array,
});

const SearchVal = ref("")
//素材列表
const materialData = ref([
  { id: 1, label: "传媒学院",total:7190 },
  { id: 2, label: "天山学院",total:324},
  { id: 3, label: "泰山学院",total:660}
]);

const onRadioChange = () => {
  console.log(labelName.value);

};

// 关闭选中的标签
const closeTag = (idx) => {
  materialData.value.forEach((item, index) => {
    if (selectMaterialArr.value[idx].id == item.id) {
      item.checked = false
    }
  })
  selectMaterialArr.value.splice(idx, 1);
}

// 清空数据
const clearData=()=>{
  materialData.value.forEach((item, index)=>{
    item.checked=false
  })
  
}

// 全选
const  selectAll=()=>{
  materialData.value.forEach((item, index)=>{
    item.checked=true

  })

}

// 反选
const invert=()=>{
  if( selectMaterialArr.value.length==0)
   return
   
  materialData.value.forEach(item=>{
    if(item.checked){
      item.checked=false
    }else{
      item.checked=true
    }

  })
}

const dialogDisabled = ref(false);
watch(
  materialData,
  (nv) => {
    let find = nv.filter((item) => item.checked);
    selectMaterialArr.value = find
  },
  { deep: true }
);


//打开dialog弹框，由外部组件触发该方法
const openDialog = async () => {
  dialogVisible.value = true;

};

defineExpose({
  openDialog,
});
</script>

<style lang="scss" scoped>
.designContent {
  padding-top: 15px;

  min-height: 350px;
  display: flex;

  .left {
    padding: 0 20px 20px 0px;
    width: 350px;
    border-right: 1px solid #eee;
    height: 390px;


    .search {
      margin-bottom: 15px;

      width: 100%;
    }

    .tagGroup{
      margin-bottom: 15px;
      display: flex;
      align-items: center;
      .item{
        padding: 0 3px;
        cursor: pointer;
      }
      .isActive{
        color: #1890FF;
      }
    }

    .radioGroup {
      .info {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding-right: 30px;

        .infoLeft {
          display: flex;
          align-items: center;

          span {
            margin-left: 5px;
          }
        }

        .infoRight {
          color: #999;
          font-size: 12px;
        }
      }
    }

    .pageOut {
      width: 100%;
      display: flex;
      justify-content: center;
      margin-top: 40px;
    }

    .el-radio.el-radio--large {
      width: 100%;
    }

    .el-radio-group {
      display: block;
    }
  }

  .right {
    padding: 20px 0 0 20px;
    width: 350px;
    min-height: 400px;

    .rightList {
      .item {
        margin-bottom: 15px;
      }

    }

    .selectItem {
      margin-bottom: 15px;

      span {
        font-size: 14px;
        color: #999;
      }

      .row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 5px 0;



        .close {
          width: 16px;
          height: 16px;
          background: #ccc;
          color: #fff;
          border-radius: 50%;
          text-align: center;
          line-height: 16px;
          cursor: pointer;
        }
      }
    }
  }
}

.rightFooter{
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
    .resetData{
      display: flex;
      align-items: center;
      p{
        color: #999;
        margin-left: 10px
      }
    }

}
</style>
